<template>
  <div class="room-status-container">
    <!-- 头部操作栏 -->
    <div class="header-bar">
      <div class="date-picker">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          :default-value="new Date(2025, 2, 5)"
        />
        <el-alert class="tip-text" :closable="false" title="左键点击日历可单独设置房态质量；批量调整房态所选日期前后都包含，设置某日请仅选择当日（例：2025-03-05）" type="info" />
      </div>
      <el-button type="primary" icon="Refresh" @click="handleRefresh">刷新</el-button>
    </div>

    <!-- 房态表格 -->
    <div class="room-table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="product" label="产品名称" fixed width="120" />
        
        <!-- 动态日期列 -->
        <el-table-column 
          v-for="(date, index) in dateColumns"
          :key="index"
          :label="date.formatted"
          align="center"
        >
          <template #header>
            <div :class="{'weekend': date.isWeekend}">
              {{ date.formatted }}
              <div v-if="date.isToday" class="today-label">今天</div>
              <div v-if="date.isTonight" class="tonight-label">今夜</div>
            </div>
          </template>
          <template #default>
            <el-select v-model="status[date.date]" placeholder="请选择">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>

      <!-- 空状态 -->
      <el-empty v-if="!tableData.length" description="暂无数据" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElDatePicker, ElTable, ElTableColumn, ElSelect, ElOption, ElButton, ElAlert, ElEmpty } from 'element-plus'

// 日期处理
const dateRange = ref(['2025-03-04', '2025-03-13'])
const dateColumns = computed(() => {
  const start = new Date(dateRange.value[0])
  const end = new Date(dateRange.value[1])
  const dates = []
  
  while (start <= end) {
    const dateObj = {
      date: start.toISOString().split('T')[0],
      formatted: `${(start.getMonth()+1).toString().padStart(2, '0')}/${start.getDate().toString().padStart(2, '0')}`,
      weekday: ['日','一','二','三','四','五','六'][start.getDay()],
      isWeekend: [0,6].includes(start.getDay()),
      isToday: start.toDateString() === new Date().toDateString(),
      isTonight: start.getDate() === new Date(2025, 2, 4).getDate()
    }
    dates.push(dateObj)
    start.setDate(start.getDate() + 1)
  }
  return dates
})

// 表格数据
const tableData = ref([]) // 设置为空数组显示暂无数据
const status = ref({})
const statusOptions = [
  { value: 'open', label: '可预订' },
  { value: 'close', label: '关闭' },
  { value: 'limited', label: '限量' }
]

// 刷新操作
const handleRefresh = () => {
  console.log('刷新数据')
}
</script>

<style lang="scss" scoped>
.room-status-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;

  .header-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .date-picker {
      flex: 1;
      margin-right: 20px;

      .tip-text {
        margin-top: 10px;
        :deep(.el-alert__title) {
          font-size: 12px;
        }
      }
    }
  }

  .room-table {
    background: white;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    :deep(.el-table) {
      th {
        background-color: #f8f9fa;
      }
      .cell {
        padding: 8px;
      }
    }

    .weekend {
      color: #f56c6c;
    }

    .today-label {
      color: #67c23a;
      font-size: 12px;
    }

    .tonight-label {
      color: #409eff;
      font-size: 12px;
    }
  }
}
</style>